<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动（额外标签法）</title>
		<style type="text/css">
			/* 常见清除浮动
			      clear: left或right或both 
			*/
			.box {
				width: 400px;
				margin: 0 auto;
				background-color: #ffff00;
			}

			.box1 {
				float: left;
				width: 200px;
				height: 200px;
				background-color: #aaaaff;
			}

			.box2 {
				float: left;
				width: 100px;
				height: 100px;
				background-color: #aaaaff;
			}

			.box3 {
				height: 300px;
				background-color: #00ff00;
			}
			/* 清除浮动（额外标签堵住，添加的标签必须是块级元素） */
			.clear {
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">大毛</div>
			<div class="box2">二毛</div>
			<div class="clear"></div>
		</div>
		<div class="box3">三毛</div>
	</body>
</html>
